<template>
  <div class="containers">
    <div class="canvas" ref="canvas-view"></div>
  </div>
</template>

<script>
import BpmnViewer from "bpmn-js/lib/Viewer";
import { xmlStrView } from "./mock/xmlStrView";
import { xmlStr } from "./mock/xmlStr.js";
import { xmlTest } from "./mock/bpmn-测试";

export default {
  name: "bpmn-viewer",
  mounted() {
    this.init();
  },
  data() {
    return {
      bpmnViewer: null,
      container: null,
      canvas: null,
    };
  },
  methods: {
    init() {
      const canvas = this.$refs["canvas-view"];
      this.bpmnViewer = new BpmnViewer({
        container: canvas,
      });

      this.createNewDiagram();
    },
    async createNewDiagram() {
      try {
        const result = await this.bpmnModeler.importXML(
          `<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:flowable="http://flowable.org/bpmn" id="diagram_Process_1705561192487" targetNamespace="http://bpmn.io/schema/bpmn"><bpmn2:process id="Process_1705561192487" name="流程_1705561192487" isExecutable="true" flowable:departId="98936838b38b414d8eae5732ad99f574" flowable:processCategory="oa" flowable:flowCategoryId="1744555355074940930"><bpmn2:startEvent id="Event_0s3nys9" name="嘻嘻嘻" flowable:formKey="1742808650591723521"><bpmn2:extensionElements><flowable:formData /></bpmn2:extensionElements><bpmn2:outgoing>Flow_15l9j0y</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="Activity_03ql4p9" name="哈哈哈哈" flowable:assignee="${INITIATOR}" flowable:candidateUsers="" flowable:candidateGroups="" flowable:candidateOrgs="" flowable:sameOrgFlag="" flowable:formTemplateId="" flowable:userTaskType="submit"><bpmn2:incoming>Flow_15l9j0y</bpmn2:incoming><bpmn2:outgoing>Flow_1b6ym5m</bpmn2:outgoing></bpmn2:userTask><bpmn2:userTask id="Activity_0bzabwo" flowable:formTemplateId=""><bpmn2:incoming>Flow_1b6ym5m</bpmn2:incoming><bpmn2:outgoing>Flow_12xcu7g</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_15l9j0y" sourceRef="Event_0s3nys9" targetRef="Activity_03ql4p9" /><bpmn2:sequenceFlow id="Flow_1b6ym5m" sourceRef="Activity_03ql4p9" targetRef="Activity_0bzabwo" /><bpmn2:endEvent id="Event_0as4mjy"><bpmn2:incoming>Flow_12xcu7g</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_12xcu7g" sourceRef="Activity_0bzabwo" targetRef="Event_0as4mjy" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1705561192487"><bpmndi:BPMNEdge id="Flow_12xcu7g_di" bpmnElement="Flow_12xcu7g"><di:waypoint x="630" y="270" /><di:waypoint x="702" y="270" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_1b6ym5m_di" bpmnElement="Flow_1b6ym5m"><di:waypoint x="440" y="280" /><di:waypoint x="485" y="280" /><di:waypoint x="485" y="270" /><di:waypoint x="530" y="270" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_15l9j0y_di" bpmnElement="Flow_15l9j0y"><di:waypoint x="228" y="270" /><di:waypoint x="284" y="270" /><di:waypoint x="284" y="280" /><di:waypoint x="340" y="280" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_0s3nys9_di" bpmnElement="Event_0s3nys9"><dc:Bounds x="192" y="252" width="36" height="36" /><bpmndi:BPMNLabel><dc:Bounds x="193" y="295" width="34" height="14" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_03ql4p9_di" bpmnElement="Activity_03ql4p9"><dc:Bounds x="340" y="240" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_0bzabwo_di" bpmnElement="Activity_0bzabwo"><dc:Bounds x="530" y="230" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_0as4mjy_di" bpmnElement="Event_0as4mjy"><dc:Bounds x="702" y="252" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>`
        );
        const { warnings } = result;
        this.$message.success("加载完成！");
      } catch (err) {
        this.$message.error(err);
      }
    },
  },
};
</script>

<style scoped>
.containers {
  width: 100%;
  height: calc(100vh - 82px);
}
.canvas {
  width: 100%;
  height: 100%;
}
</style>
